<template>
  <div class="wrap">
    <div class="mychats" :id="chartId" :style="{ width: '90%', height: '90%' }"></div>
  </div>
</template>
   
<script>
import { inject, onMounted } from 'vue'
export default {
  name: 'leftCenter',
  props: ['chartId'],
  setup(props) {
    let echarts = inject('ec') //引入
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById(props.chartId))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '',
          x: 'right',
          textStyle: {//主标题的属性
            color: '#c7c8c9',//颜色
            fontSize: 14,//大小
          },
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [ '2#拉力器'],
          x: "center",
          y: "top",
          padding: [0, 0, 0, 0],
          textStyle: {
            color: '#c7c8c9'
          }

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['11:00', '11:30', '12:00', '12:30', '13:00'],

        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#3e3f40'],
              width: 1,
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: '2#拉力器',
            type: 'line',
            stack: 'Total',
            data: [3, 4, 23, 11, 22],
            itemStyle: {
              normal: {
                color: '#35857d',
                lineStyle: {
                  color: '#35857d'
                }
              }
            },
          }
        ]
      })
      window.onresize = function () {
        //自适应大小
        myChart.resize()
      }
    })
  },
  components: {},
  mounted() { },
}
</script>
   
<style scoped lang='scss'>
.wrap {
  width: 100%;
  height: 100%;

  .mychats {
    margin: 0 auto;

  }

  .moudle-title {
    color: #161616;
    font-size: 16px;
    text-align: center;
  }

  #myChart {
    margin: 0 auto;
  }
}
</style>